<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Divider orientation="center">用户信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>手机号:{{ orderInfo.voucher.maskPhone }}</div>
        </Col>
        <Col span="12">
          <div>用户昵称:{{ orderInfo.voucher.maskName }}</div>
        </Col>
      </Row>
      <Divider orientation="center">订单信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>订单编号:{{ orderInfo.voucher.code }}</div>
        </Col>
        <Col span="12">
          <div>
            订单状态:
            <span v-if="orderInfo.voucher.state == 1">未核销</span>
            <span v-if="orderInfo.voucher.state == 2">已核销</span>
            <span v-if="orderInfo.voucher.state == 3">已失效</span>
          </div>
        </Col>
        <Col span="12">
          <div>商品名称:{{ orderInfo.goods.goodsName }}</div>
        </Col>
        <Col span="12">
          <div>清洗件数:{{ orderInfo.goods.num }}</div>
        </Col>
        <Col span="12">
          <div>创建时间:{{ orderInfo.voucher.createTime }}</div>
        </Col>
      </Row>
      <Divider orientation="left">支付信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>支付时间:{{ orderInfo.voucher.createTime }}</div>
        </Col>
        <Col span="12">
          <div>
            支付金额:￥{{ orderInfo.voucher.payAmount }}
          </div>
        </Col>
      </Row>
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    name: 'order-ope',
    data() {
      return {
        isShowModal: false,
        loadingBtn: false,
        orderInfo: {
          voucher: {},
          goods: { goodsImages: [''] }
        },
        title: '订单详情'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/voucher/v1/getVoucherById', {
            params: { id: row.voucherid }
          })
          .then(res => {
            console.log(res);
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              // this.$Message.success('操作成功.');
              this.orderInfo = res.data;
              if (res.data.goods.goodsImages) {
                this.orderInfo.goods.goodsImages = JSON.parse(
                  res.data.goods.goodsImages
                );
              }
              if (res.data.voucher.createTime) {
                this.orderInfo.voucher.createTime = moment(
                  res.data.voucher.createTime
                ).format('YYYY-MM-DD HH:mm:ss');
              }
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查看订单详情接口报错',
                duration: 0
              });
            }
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      }
    }
  };
</script>

<style scoped lang="less">
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
